<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- 最新 Bootstrap4 核心 CSS 文件 -->

<link rel="stylesheet" th:href="@{/css/new_file.css}"/>

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
 <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
 <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script	src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script	src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- DaterangePicker -->
<link rel="stylesheet" type="text/css" media="all" href="./daterangepicker/daterangepicker.css" />
<!-- BootStrapValidator -->
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="echarts.min.js"></script>
<script type="text/javascript">
	
</script>
</head>

<body>
	<div class="bg-secondary">
	<div class="container-fluid ">
	<header class="row h-6 w-100 p-3">
		<nav class="navbar navbar-expand-md bg-dark navbar-dark container-fluid">
			<div class="img-fluid"><img src="./img/logo_1.png" /></div>
			<a class="navbar-brand" href="#">YIN—MUSICS后台管理</a>
			
<!-- 按钮边框 -->
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
		    <span class="navbar-toggler-icon"></span>
		  </button>
		 
		 
			<div></div>
			<br/>
			<br/>
			<br/>
			<br/>
			<div class=" d-flex justify-content-end w-100">
		  <ul class="navbar-nav">
		    
			<li class="nav-item dropdown">
			  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">admin</a>
			  <div class="dropdown-menu">
			    <a class="dropdown-item" href="#">退出</a>
			    <a class="dropdown-item" href="#">Another action</a>
			    <a class="dropdown-item" href="#">Something else here</a>
			    <div class="dropdown-divider"></div>
			    <a class="dropdown-item" href="#">Separated link</a>
			  </div>
			</li>
		  </ul>
		  </div>
		  </header>
		</nav>
		
		<div class="row vh-100 container-fluid">
		<div class="bg-dark col-sm-2 clearfix">
			<br>
		<!-- 侧边功能栏 -->
		<ul class="nav flex-column">
			<!--  
		  <li class="">
		    <a href="#sub1" class="nav-link active text-white bg-dark" data-toggle="collapse" href="#">Active</a>
			
			<ul id="sub1" class="nav collapse flex-column">
			<li><a class="nav-link" href ="#">系统管理</a></li>
			<li><a class="nav-link" href ="#">系统管理</a></li>
			<li><a class="nav-link" href ="#">系统管理</a></li>
			</ul>
			
		  </li>
		  -->
		  <li class="nav-item">
			 
		    <a class="nav-link text-white bg-dark" href="#"><img src="img/shouye-3.png" />&nbsp;&nbsp;系统首页</a>
			
		  </li>
		  
		  <li class="nav-item">
			  
		    <a class="nav-link text-white bg-dark" href="#"><img src="img/yonghu-3.png"/>&nbsp;&nbsp;用户管理</a>
		  </li>
		  <li class="nav-item">
		    <a class="nav-link text-white bg-dark" href="#"><img src="img/yangge.png"/>&nbsp;&nbsp;歌手管理</a>
		  </li>
		  <li class="nav-item">
		    <a class="nav-link text-white bg-dark" href="#"><img src="img/yinle-3.png"/>&nbsp;&nbsp;歌单管理</a>
		  </li>
		 
		</ul>
		</div>
<div  class="col-md-10 flex-column bg-light ">

	<div class="row" style="width: 100;height:80px;">
	  <div class=" col p-10 tj_box" style="background-color: #eee;">用户数量</div>
	  <div class=" col p-10 tj_box" style="background-color: #eee;">歌手数量</div>
	  <div class=" col p-10 tj_box" style="background-color: #eee;">歌曲数量</div>
	  <div class=" col p-10 tj_box" style="background-color: #eee;">歌单数量</div>
	</div>
	<br/>
	<br/>
	<div class="flex-column">
	<div id="main" class="w-100"style="height:500px;"></div>
	<br />
	<div id="main1" class="w-100"style="height:400px;"></div>
	</div>
	 <script type="text/javascript">
            $(document).ready(function(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                //数据加载完之前先显示一段简单的loading动画
                myChart.showLoading();
                var values=[];
                //数据加载完之前先显示一段简单的loading动画
                myChart.showLoading();
                $.ajax({
                    type : "post",
                    async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                    url : "/user/show",    //请求发送到dataActiont处
                    data : {},
                    dataType : "json",        //返回数据形式为json
                    success : function(data) {
                        //请求成功时执行该函数内容，result即为服务器返回的json对象
                        if (data) {
                            for(var i=1;i<data.length;i++){
                                var test={"value":data[i].musicer, "name":data[i].user_name};
                                values.push(test);

                            }

                            myChart.hideLoading();    //隐藏加载动画
                            myChart.setOption(
                                {
                                    title: {
                                        text: '音乐人数量分布',
                                         
                                        left: 'center'
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left',
                                        data: values
                                    },
                                    series: [
                                        {
                                            name: '物料来源',
                                            type: 'pie',
                                            radius: '60%',
                                            center: ['50%', '50%'],
                                            data:values,
                                            itemStyle: {
                                                emphasis: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                }
                            );
                        }
                    },
                    error : function(errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        myChart.hideLoading();
                    }
                });//end ajax


            });//刷新方法结束


        </script>
	
<script type="text/javascript">
    $(document).ready(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/sheet/show",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i++){
                    	names.push(result[i].labal);
                        values.push(result[i].song_num);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({
                        //加载数据图表
                        title:{
                            text: '歌曲数量统计图'
                        },

                        legend: {
                            data:['歌曲数量']
                        },
                        xAxis: {
                            data: names,
                            axisLabel:{
                                interval: 0
                            }

                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '歌曲数量',
                            type: 'bar',
                            data: values
                        }]
                    });
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });

</script>
</div>
</div>
</div>
</div>
</body>
</html>
